<template>
  <div>
    <section class="section cta">
      <div class="container">
        <ul class="cta-list">
          <li>
            <div class="cta-card ad-card-adidas adidas-img" @click="showBrandDetail(6)">
              <p class="card-subtitle">Adidas</p>
              <h3 class="h2 card-title">夏日特惠</h3>
              <a href="#" class="btn btn-link">
                <span>现在购买</span>
              </a>
            </div>
          </li>
          <li>
            <div class="cta-card ad-card-nike nike-img" @click="showBrandDetail(58)">
              <p class="card-subtitle">NIKE</p>
              <h3 class="h2 card-title">新品上市</h3>
              <a href="#" class="btn btn-link">
                <span>现在购买</span>
              </a>
            </div>
          </li>
        </ul>
      </div>
    </section>

    <section class="section special">
      <div class="container">
        <div class="special-banner aside" @click="goto(29)">
          <span class="aside-title">这位更是</span>
          <span class="aside-title-important">重量级</span>
          <div class="btn link-card" >
            <span>iPhone 13Pro</span>

            <ion-icon name="arrow-forward-outline" aria-hidden="true"></ion-icon>
          </div>
        </div>

        <div class="special-product">

          <h2 class="h2 section-title">
            <span class="text">MI专柜</span>

            <span class="line"></span>
          </h2>

          <ul class="has-scrollbar">

            <li v-for="appleItem in apples" :key="appleItem.name" class="product-item">
              <div class="product-card" tabindex="0">
                <figure class="card-banner">
                  <img @click="goto(appleItem.id)" :src="appleItem.img" :style="{
                    height: '100%',
                    width: 'auto',
                  }" width="312" height="450" loading="lazy" alt="Running Sneaker Shoes" class="image-contain">
                </figure>

                <div class="card-content">

                  <div class="card-cat">
                    <a href="#" class="card-cat-link">2021</a> /
                    <a href="#" class="card-cat-link">2022</a>
                  </div>

                  <h3 class="h3 card-title">
                    <a href="#">{{ appleItem.name }}</a>
                  </h3>

                </div>

              </div>
            </li>
          </ul>

        </div>

      </div>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      apples: [{
        "id": 27,
        "name": "小米8 全面屏游戏智能手机 6GB+64GB 黑色 全网通4G 双卡双待",
        "img": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1656916095.89126677.png",
      }, {
        "id": 28,
        "name": "小米 红米5A 全网通版 3GB+32GB 香槟金 移动联通电信4G手机 双卡双待",
        "img": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1650439833.58927055.png",
      }, {
        "id": 33,
        "name": "小米（MI）小米电视4A ",
        "img": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1634637922.04175457.jpg",
      }, {
        "id": 34,
        "name": "小米（MI）小米电视4A 65英寸",
        "img": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1624606486.69286556.jpg",
      }]
    }
  },
  methods: {
    goto(id) {
      this.$router.push({
        path: this.$router.push({path: '/front/detail', query: {id: id}})
      })
    },
    showBrandDetail(val) {
      this.$router.push({
        path: '/front/brandDetail',
        query: {
          id: val
        }
      })
    }
  }
}
</script>

<style scoped>
.ad-card-adidas {
  border-radius: 20px;
  height: 300px;
  background-image: url("https://img.youpin.mi-img.com/ferriswheel/43b7cae9_65d9_4dea_87a4_4cedfcc758e6.jpeg@base@tag=imgScale&F=webp&h=1080&q=90&w=1920");
}

.ad-card-nike {
  border-radius: 20px;
  height: 300px;
  background-image: url("https://www.nikestore.com.cn/nike-pim/2022-07-13/pc_fff37971-1663-483d-b170-40c53ae0ff57.jpg");
}

.aside {
  background-image: url("https://www.apple.com.cn/v/home/aq/images/promos/iphone-13-pro/promo_iphone13pro_avail__beadms4ldidu_medium_2x.jpg");
  background-size: cover;
}

.aside-title {
  font-size: 2.5rem;
  font-weight: bold;
  margin-top: -20px;
  text-align: center;
  background-image: linear-gradient(to right, #58d551, #32c1e9);
  color: transparent;
  -webkit-background-clip: text;
}

.aside-title-important {
  font-size: 2.5rem;
  font-weight: bold;
  margin-top: -420px;
  text-align: center;
  background-image: linear-gradient(to right, #953a1e, #ffd14f);
  color: transparent;
  -webkit-background-clip: text;
}

.link-card {
  color: #000000dd;
  border-radius: 20px;
  padding: 1rem;
  margin-bottom: -2rem;
  background: rgba(255, 255, 255, 0.77);
  border: none;
  font-weight: bold;
}
</style>